<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>
#drawing{border:1px solid #ddd;}
</style>
<script src="../第十三章事件/eventObject.js" type="text/javascript"></script>
</head>

<body>
	<canvas id="drawing" width="500" height="500">A drawing of something</canvas>
    <script>
    	var drawing = document.getElementById('drawing');
		
		//判断浏览器是否支持canvas(IE8-不支持)
		if(drawing.getContext){
			
			//先找到画笔就是绘制环境（取得绘图上下文对象）
			var context=drawing.getContext('2d');
			
			//绘制外圆
			context.arc(100, 100, 99, 0, 2*Math.PI, false);
			
			//绘制内圆
			context.moveTo(194, 100);
			context.arc(100, 100, 94, 0, 2*Math.PI, false);
			
			//变换原点
			context.translate(100, 100);
			
			//旋转表针
			context.rotate(1);
			
			//绘制分针
			context.moveTo(0, 0);
			
			context.lineTo(0, -85);
			
			//绘制时针
			context.moveTo(0, 0);
			
			context.lineTo(-65, 0);
			
			//将路径用实线描绘出来
			context.stroke();
			
			
			
		}
		
		
		
		
    </script>
</body>
</html>
